<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .item {
            display: flex;
            align-items: center;
            width: 600px;
            justify-content: space-around;
            border-bottom: 2px solid #ddd;
        }

        .item button {
            height: 40px;
            border: 0px;
            box-sizing: 2px 2px 5px 2px #a89d9d;
            border-radius: 7px;
            padding: 0 15px;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <script>
        let list = {
            "code": 0,
            "message": "成功",
            "result": {
                "bookList": [
                    {
                        "bookId": 1453261,
                        "bookName": "异瞳拳王",
                        "isSign": 0,
                        "chapterId": 91853109,
                        "chapterName": "第一章  异瞳初启：屠象者的慢镜头死亡",
                        "authorId": 87235921,
                        "authorName": "一笑三干",
                        "totalWords": 0,
                        "updateTime": "2025-08-19 09:31:54",
                        "cateId": 8477,
                        "cateName": "",
                        "cateShortName": "都市",
                        "catePid": 8103,
                        "cateFineId": 8103,
                        "cateFineName": "都市",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1453260,
                        "bookName": "我真是被迫加入乐队的！",
                        "isSign": 0,
                        "chapterId": 91853108,
                        "chapterName": "1 走路不看路的女孩",
                        "authorId": 87322257,
                        "authorName": "披萨蛋糕酱",
                        "totalWords": 0,
                        "updateTime": "2025-08-19 09:31:35",
                        "cateId": 8203,
                        "cateName": "",
                        "cateShortName": "N次元",
                        "catePid": 8108,
                        "cateFineId": 8108,
                        "cateFineName": "N次元",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1453170,
                        "bookName": "青雾山养灵人",
                        "isSign": 0,
                        "chapterId": 91853091,
                        "chapterName": "青雾山的生息道",
                        "authorId": 87324007,
                        "authorName": "胡先生",
                        "totalWords": 45978,
                        "updateTime": "2025-08-19 09:29:07",
                        "cateId": 8415,
                        "cateName": "",
                        "cateShortName": "玄幻奇幻",
                        "catePid": 8101,
                        "cateFineId": 8101,
                        "cateFineName": "玄幻奇幻",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1452515,
                        "bookName": "花都神使",
                        "isSign": 0,
                        "chapterId": 91853075,
                        "chapterName": "002宿舍规定",
                        "authorId": 87250744,
                        "authorName": "无解无奈",
                        "totalWords": 6221,
                        "updateTime": "2025-08-19 09:24:49",
                        "cateId": 8476,
                        "cateName": "",
                        "cateShortName": "都市",
                        "catePid": 8103,
                        "cateFineId": 8103,
                        "cateFineName": "都市",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1452640,
                        "bookName": "我在大明当财神",
                        "isSign": 0,
                        "chapterId": 91853070,
                        "chapterName": "第7章  只为献策",
                        "authorId": 56313536,
                        "authorName": "今天有雨",
                        "totalWords": 21993,
                        "updateTime": "2025-08-19 09:23:28",
                        "cateId": 8293,
                        "cateName": "",
                        "cateShortName": "历史",
                        "catePid": 8104,
                        "cateFineId": 8104,
                        "cateFineName": "历史",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1452437,
                        "bookName": "仙界富家翁",
                        "isSign": 0,
                        "chapterId": 91822899,
                        "chapterName": "第21章:中仙门径·上品灵石的门槛",
                        "authorId": 87175857,
                        "authorName": "美女蛇爱我",
                        "totalWords": 74444,
                        "updateTime": "2025-08-19 09:23:27",
                        "cateId": 8414,
                        "cateName": "",
                        "cateShortName": "玄幻奇幻",
                        "catePid": 8101,
                        "cateFineId": 8101,
                        "cateFineName": "玄幻奇幻",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1453259,
                        "bookName": "灵铺异闻录",
                        "isSign": 0,
                        "chapterId": 91853101,
                        "chapterName": "镜中影",
                        "authorId": 82966894,
                        "authorName": "嬴",
                        "totalWords": 6826,
                        "updateTime": "2025-08-19 09:21:44",
                        "cateId": 8323,
                        "cateName": "",
                        "cateShortName": "奇闻异事",
                        "catePid": 8106,
                        "cateFineId": 8106,
                        "cateFineName": "奇闻异事",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1452587,
                        "bookName": "难忘的影子",
                        "isSign": 0,
                        "chapterId": 91853066,
                        "chapterName": "第六章步入社会",
                        "authorId": 87294282,
                        "authorName": "骄阳暖人心",
                        "totalWords": 27737,
                        "updateTime": "2025-08-19 09:21:16",
                        "cateId": 8474,
                        "cateName": "",
                        "cateShortName": "都市",
                        "catePid": 8103,
                        "cateFineId": 8103,
                        "cateFineName": "都市",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1452875,
                        "bookName": "误入宫廷的棋圣",
                        "isSign": 0,
                        "chapterId": 91853033,
                        "chapterName": "第八章",
                        "authorId": 84258432,
                        "authorName": "玄荒客",
                        "totalWords": 11373,
                        "updateTime": "2025-08-19 09:17:11",
                        "cateId": 8291,
                        "cateName": "",
                        "cateShortName": "历史",
                        "catePid": 8104,
                        "cateFineId": 8104,
                        "cateFineName": "历史",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1452888,
                        "bookName": "穿越乱世之缘定今生",
                        "isSign": 0,
                        "chapterId": 91853016,
                        "chapterName": "第5章：信任危机",
                        "authorId": 87276041,
                        "authorName": "和我去爬山",
                        "totalWords": 19932,
                        "updateTime": "2025-08-19 09:14:40",
                        "cateId": 8291,
                        "cateName": "",
                        "cateShortName": "历史",
                        "catePid": 8104,
                        "cateFineId": 8104,
                        "cateFineName": "历史",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1453118,
                        "bookName": "龙游花都",
                        "isSign": 0,
                        "chapterId": 91853012,
                        "chapterName": "002吃了一条龙",
                        "authorId": 87250744,
                        "authorName": "无解无奈",
                        "totalWords": 14266,
                        "updateTime": "2025-08-19 09:12:45",
                        "cateId": 8478,
                        "cateName": "",
                        "cateShortName": "都市",
                        "catePid": 8103,
                        "cateFineId": 8103,
                        "cateFineName": "都市",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1453220,
                        "bookName": "遗光行者",
                        "isSign": 0,
                        "chapterId": 91853003,
                        "chapterName": "蚀光",
                        "authorId": 87312102,
                        "authorName": "修师",
                        "totalWords": 69945,
                        "updateTime": "2025-08-19 09:12:19",
                        "cateId": 8413,
                        "cateName": "",
                        "cateShortName": "玄幻奇幻",
                        "catePid": 8101,
                        "cateFineId": 8101,
                        "cateFineName": "玄幻奇幻",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1453245,
                        "bookName": "如果秦朝是这样灭亡的",
                        "isSign": 0,
                        "chapterId": 91852997,
                        "chapterName": "第五章 始皇帝宝库(上)",
                        "authorId": 43718412,
                        "authorName": "荆楚山人",
                        "totalWords": 11027,
                        "updateTime": "2025-08-19 09:10:40",
                        "cateId": 8291,
                        "cateName": "",
                        "cateShortName": "历史",
                        "catePid": 8104,
                        "cateFineId": 8104,
                        "cateFineName": "历史",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1453184,
                        "bookName": "万劫噬道：我于天狱斩神魔",
                        "isSign": 0,
                        "chapterId": 91852970,
                        "chapterName": "第六章 噬魂开锋，劫火焚天",
                        "authorId": 87314391,
                        "authorName": "昆仑来客",
                        "totalWords": 61641,
                        "updateTime": "2025-08-19 09:10:00",
                        "cateId": 8351,
                        "cateName": "",
                        "cateShortName": "武侠仙侠",
                        "catePid": 8102,
                        "cateFineId": 8102,
                        "cateFineName": "武侠仙侠",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    },
                    {
                        "bookId": 1452329,
                        "bookName": "斗罗V：开局成为独孤博养子",
                        "isSign": 0,
                        "chapterId": 91852975,
                        "chapterName": "第十三章·吸收魂骨",
                        "authorId": 86877669,
                        "authorName": "生意气",
                        "totalWords": 26978,
                        "updateTime": "2025-08-19 09:09:18",
                        "cateId": 8203,
                        "cateName": "",
                        "cateShortName": "N次元",
                        "catePid": 8108,
                        "cateFineId": 8108,
                        "cateFineName": "N次元",
                        "coverUrl": "",
                        "level": 0,
                        "serialStatus": 0,
                        "chapterLevel": 0
                    }
                ]
            }
        }

        // 1.通过ajax  拿到上面的list
        // 2.
        // let arr = []
        // console.log(list["result"]);
        // let a = list["result"]
        // let b = a["bookList"]
        // for (let i in b) {
        //     console.log(b[i]["bookName"]);
        //     arr.push(b[i]["bookName"])
        // }
        // console.log(arr);

        // let box = document.querySelector(".box")
        // for (let i = 0; i < arr.length; i++) {
        //     // 3，显示数据
        //     let h2 = document.createElement("h2")
        //     h2.innerHTML = arr[i]
        //     box.appendChild(h2)
        // }

        let box = document.querySelector(".box")
        let a = list.result.bookList
        for (let i in a) {
            let div = document.createElement("div")
            div.classList.add("item")
            box.appendChild(div)
            let h2 = document.createElement("h2")
            let p = document.createElement("p")
            let button = document.createElement("button")
            // button.setAttribute()
            h2.innerHTML = a[i].bookName
            p.innerHTML = "作者:" + a[i].authorName
            button.innerHTML = "查看id"
            div.appendChild(h2)
            div.appendChild(p)
            div.appendChild(button)
        }
        let btn = document.querySelectorAll(".item button")
        console.log(btn);
        for (let i = 0; i < btn.length; i++) {
            // btn[i].addEventListener('click',search(a,i))
            btn[i].onclick = function () {
                console.log(a[i].bookId);
            }
        }
      

        // function handleButtonClick(index) {
        //     return function () {
        //         console.log(a[index].bookId);
        //     };
        // }

        // for (let i = 0; i < btn.length; i++) {
        //     btn[i].onclick = handleButtonClick(i);
        // }
        
        // btn.forEach((button, index) => {
        //     button.onclick = function () {

        //         console.log(a[index].bookId);
        //     };
        // });

    </script>
</body>

</html>